/* 导航样式开始 */
.nav {
    text-align: center;
}

.nav ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav li {
    display: inline-block;
    margin-right: 20px; /* 调整右边距，以增加每个导航项之间的空隙 */
}

.nav a {
    text-decoration: none;
    color: #333; /* 设置链接颜色 */
    font-weight: bold; /* 设置链接文本为粗体 */
    font-size: 16px; /* 设置字体大小 */
}

.nav {
    background-color: #f8f8f8; /* 设置导航栏背景颜色 */
    border-bottom: 2px solid #ddd; /* 设置底部边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
}

.nav ul {
    padding: 10px 0; /* 设置导航项的上下内边距 */
}

.nav li {
    margin-right: 20px;
}

.nav a {
    padding: 10px 15px; /* 设置导航项的内边距 */
    border-radius: 5px; /* 设置导航项的边角半径 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.nav a:hover {
    background-color: #ddd; /* 设置鼠标悬停时的背景颜色 */
}

.nav>ul {
    /* 元素水平居中 */
    margin: 0 auto;
    width: 791px;
}
/* 鼠标悬停到li上改变a的字体颜色 */
.nav li:hover > a {
    color: #008cf0;
}

/* 导航样式结束 */
.banner {
    /* 最外层的大容器宽度，适配所有电脑的分辨率 */
    /* width: 100%;
    height: 450px; */
    background: #fff url("../one/564fb620-5b91-4611-8a29-f207f97e96d3\(2\).jpg") center no-repeat;
    background-size: cover; /* 适应容器尺寸 */
    background-position: center; /* 图像居中 */
    height: 200px; /* 适当设置高度 */
}
/* 广告有样式开始 */
.adv {
    width: 100%;
    height: 232px;
    padding-bottom: 45px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}
/* wrap是实现元素水平居中不设置高度，水平居中的元素高度不一致 */
.wrap {
    width: 100%;
    max-width: 1240px; /* 适配大屏幕，但不会超过1240px */
    margin: 0 auto;
    height: auto;
    background-color: gainsboro;
}
.adv-box {
    width: 310px;
    /* 内容的高度为187 */
    height: 187px;
    /* 内容据边框的距离 */
    padding-top: 45px;
    background-color: white;
    /* 块级元素水平显示 */
    float: left;
}
.adv-box img {
    width: 130px;
}
.adv-name {
    color: #333;
    font-size: 20px;
}
.adv-desc {
    color: #999;
    font-size: 14px;
}
/* 手机样式 */
.title {
    font-size: 30px;
    height: 45px;
    font-weight: 400;
    margin-top: 50px;
}

.home-img {
    /* width: 100%; */
    background: url(../six/seven/3b2fa580-7387-46fe-8c22-4464e6cc44e4.jpg) center no-repeat;
    background-size: cover; /* 适应容器尺寸 */
    background-position: center; /* 图像居中 */
    /* height: 200px; */ /* 移除或设置为 auto，以完全显示图像 */
}

.home-ing:hover {
    opacity: 0.85;
}
.phone-box {
    width: 100%;
    height: 1005px;
    background: url("../three/248c188e-2fa9-4482-b9cc-a49f3ca48cf4(3).jpg") center no-repeat;
}

/* 添加媒体查询，适应不同屏幕宽度 */
@media (max-width: 768px) {
    .phone-box {
        height: auto; /* 高度自适应 */
    }
}
/* 这是响应式代码，自适应屏幕 */
/* 广告样式结束 */
/* 主体开始 */
.containner {
    /* 不设置高度,高度由内容撑开 */
    width: 100%;
    min-width: 1240px;
    background-color: #999;
    /* 内容溢出部分隐藏加了此属性以后会开启BFC格式，变为独立的一块，布局不受子元素影响 */
    overflow: hidden;
}
/* 主体结束 */
/* 手机样式开始 */
.title {
    font-size: 30px;
    height: 45px;
    font-weight: 400;
    margin-top: 50px;
}
.home-img {
    /* width: 100%;
    height: 450px; */
    background: url(../six/seven/3b2fa580-7387-46fe-8c22-4464e6cc44e4.jpg) center no-repeat;
    background-size: cover; /* 适应容器尺寸 */
    background-position: center; /* 图像居中 */
    height: 200px; /* 适当设置高度 */
}
.phone-box {
    /* width: 100%;
    height: 1005px; */
    background: #eee;
    background-size: cover; /* 适应容器尺寸 */
    background-position: center; /* 图像居中 */
    height: 200px; /* 适当设置高度 */
}
.phone-box-top {
    width: 100%;
    height: 620px;
}
.phone-box-bottom {
    width: 100%;
    height: 385px;
}
.phone-box-top>div {
    width: 615px;
    height: 610px;
    background-color: #fff;
    float: left;
    margin-top: 
    10px;
}
.phone-top-left {
    margin-right: 10px;
}
.item {
    width: 303px;
    height: 375px;
    background-color: #fff;
    float: left;
    margin-top: 10px;
    margin-right: 9px;
}
.right {
    margin-right: 0;
}
.name1 {
    color: #333;
    font: 28px;
    margin-top: 58px;
}
.desc1 {
    font-size: 18px;
    margin-bottom: 3px;
}
.price1 {
    color: #c00;
    font-size: 22px;
}
.price1>span {
    font-size: 14px;
}
.price1>i {
    font-style: normal;
    font-size: 16px;
}
.phone-box-top img {
    width: 460px;
    height: 460px;
}
.goods-img {
    width: 230px;
    height: 230px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.good-name {
    margin-bottom: 2px;
}
.goods-desc {
    color: #999;
    font-size: 14px;
}
/* 添加媒体查询，适应不同屏幕宽度 */
@media (max-width: 768px) {
    .phone-box {
        height: auto; /* 高度自适应 */
    }
}
/* 这是响应式 */
/* 手机样式结束 */
/* MUVY开始 */
.home-img1 {
    background-image: url(../six/db514cb5-e925-4f4c-9bb7-7c090a80f78a.webp);
    background-size: cover; /* 适应容器尺寸 */
    background-position: center; /* 图像居中 */
    height: 200px; /* 适当设置高度 */
}

.muvy-box {
    width: 100%;
    height: 770px;
    background-color: #999;
}
@media (max-width: 768px) {
    .phone-box {
        height: auto; /* 高度自适应 */
    }
}
/* 这是响应式代码，自适应屏幕 */
/* MUVY结束 */
